<template>
    <div class="common-layout" style="height: 100%;">
        <el-container style="height: 100%;">
            <el-aside width="200px" style="background-color: #545c64;">
                <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                    default-active="1" text-color="#fff" @open="handleOpen" @close="handleClose">
                    <el-menu-item @click="$router.push('/admin/index')" index="1">
                        <el-icon><icon-menu /></el-icon>
                        <span>首页</span>
                    </el-menu-item>
                    <el-menu-item @click="$router.push('/admin/us')" index="2">
                        <el-icon>
                            <document />
                        </el-icon>
                        <span>用户管理</span>
                    </el-menu-item>
                    <el-menu-item @click="$router.push('/admin/order')" index="3">
                        <el-icon>
                            <setting />
                        </el-icon>
                        <span>订单管理</span>
                    </el-menu-item>
                    <el-menu-item @click="$router.push('/admin/book')" index="4">
                        <el-icon>
                            <setting />
                        </el-icon>
                        <span>图书管理</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header >
                    <div style="margin-top: 10px;">
                      <!--
                        <el-icon><Avatar /></el-icon> 管理员 <el-button type="success" @click="logout">退出登陆</el-button>

  
                      -->
                      <el-dropdown split-button type="primary" @click="">

                        <el-icon><Avatar />  </el-icon>管理员

      <template #dropdown>
        <el-dropdown-menu>
            <el-dropdown-item @click="logout">退出登陆</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>



                    </div>
                    
                </el-header>
                <el-main style="    background-color: #f0f2f5; height: 100%;">

                    <RouterView></RouterView>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { useCounterStore } from '@/stores/counter';
import { useRouter } from 'vue-router';
const router = useRouter()
const store = useCounterStore()

const logout = () => {
    store.logout()
    router.push('/login')
}
const handleOpen = () => {

}
const handleClose = () => {}
</script>
<style scoped></style>